<template>
  <div>
    <p>
      <span>{{bizData}}</span>
      <input v-model="bizData" />
      <button @click="gotoAA">GOTOAA</button>
    </p>
    <p>Page A</p>
    <p>
      <router-link to="/">back</router-link>
    </p>
    <p>
      <router-link to="/aa">To AA</router-link>
    </p>
    <p>
      <router-link to="/ab">To AB</router-link>
    </p>
    <p>
      <button @click="handleClick">TEST</button>
    </p>
    <div class="div_rent">
      <!-- 挂载子路由 -->
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import proto from '../../static/js/ProtoTypes_pb'
export default {
  data () {
    return {
      bizData: 'This is first val.'
    }
  },
  methods: {
    gotoAA () {
      this.$router.push({
        path: '/aa',
        query: {content: this.bizData}
      })
    },
    handleClick: function () {
      var user = new proto.User()
      user.setId(10)
      var bs = user.serializeBinary()
      console.log(bs)
    }
  }
}
</script>
<style scoped>
.div_rent {
  color:red;
  border: 1px solid;
  width: 300px;
  height: 200px;
}
</style>
